import classNames from 'classnames';
import styles from '@/app/[locale]/home/home.module.scss';
import SectionLeftHome from '@/app/[locale]/home/section';
import TagLeftHome from '@/app/[locale]/home/tag';
import type { ISectionClient } from '@/interfaces';
import SectionGroupLeftHome from '@/app/[locale]/home/sectionGroup';
import { useContext } from 'react';
import { HomePageContext } from '@/contexts/home';

export default function LeftHome({
  sections = [],
}: {
  sections?: ISectionClient[];
}) {
  const context = useContext(HomePageContext);
  const sectionGroups = sections
    .filter((item) => !!item.sectionGroup)
    .filter(
      (item, index, array) =>
        array.findIndex(
          (value) => value.sectionGroup!.id === item.sectionGroup!.id,
        ) === index,
    )
    .map((item) => item.sectionGroup)
    .sort((a, b) => a!.sort - b!.sort) as [];

  return (
    <div
      className={classNames(
        'd-none d-lg-block col-2 ms-2 position-sticky overflow-y-auto',
        styles.pc_left,
      )}
    >
      <div className="vstack gap-4">
        {sectionGroups.length > 0 && (
          <SectionGroupLeftHome items={sectionGroups} />
        )}

        <SectionLeftHome
          items={
            (context.currentSectionGroupItem
              ? sections.filter(
                  (item) =>
                    item.sectionGroup &&
                    item.sectionGroup.id ===
                      context.currentSectionGroupItem!.id,
                )
              : sections) as []
          }
        />

        <TagLeftHome />
      </div>
    </div>
  );
}
